<template>
  <view class="container">
    <custom-status-bar></custom-status-bar>
	
	
	<uv-loading-page :loading="showLoading" loading-mode="spinner"></uv-loading-page>

    <!-- 顶部导航 -->
    <view class="header">
      <view class="back-icon" @click="goBack">
        <uni-icons type="left" size="20" color="#1890ff"></uni-icons>
        <text>返回</text>
      </view>
      <text class="title">个人资料</text>
    </view>


    <!-- 头部背景 -->
    <!-- <image :src="backgroundImg" class="bg-image" /> -->
	
	
	
	

    <template v-if="uni.getStorageSync('coffee_token')">




      <!-- 用户信息 -->
      <view class="user-section">
        <image :src="avatar" class="avatar" />
        <view class="user-info">
          <view class="username">{{ user.nickName }}</view>
          <view class="signature">{{ brief }}</view>
        </view>
      </view>

      <!-- 功能列表 -->
      <view class="menu-list">
        <view v-for="(item, index) in menuItems" :key="index" class="menu-item" @click="navigateTo(item.path)">
          <text>{{ item.title }}</text>
          <uni-icons type="right" size="16" color="#999"></uni-icons>
        </view>
      </view>

    </template>

    <template v-else>
      <uv-empty mode="permission" class="center">
        <view class="login-btn" @click="handleLogin">
          <text>登录</text>
        </view>

      </uv-empty>
    </template>



  </view>
</template>

<script setup>
import { ref, reactive, computed, nextTick, onMounted, onUnmounted } from 'vue';
import CustomStatusBar from '../../components/common/CustomStatusBar.vue';
import { onLoad, onShow } from "@dcloudio/uni-app"
import { User } from "@/api/index.js"

const showLoading=ref(false)


// const token = ref(uni.getStorageSync('coffee_token'))

// const isLoggedIn = computed(()=> uni.getStorageSync('coffee_token')?true:false)


const user = reactive({
  desc: '',
  nickName: '',
  userBg: '',
  userImg: '',
  vip: 0
})

const backgroundImg = computed(() => {
  return user.userBg ? 'https://placehold.net/600x400.png' : user.userBg;
});


const avatar = computed(() => {
  return user.userImg ? 'https://placehold.net/avatar.png' : user.userImg;
});

const brief = computed(() => {
  return user.desc ? user.desc : '这家伙真懒,什么都没留下';
});




// 获取用户信息
const fetchUserInfo = async () => {
	showLoading.value =true 

  if (uni.getStorageSync('coffee_token')) {
    try {
      const res = await User(uni.getStorageSync('coffee_token'));
      // console.log('我的', res);
      if (res.code === 'A001') {
        user.desc = res.result[0].desc;
        user.nickName = res.result[0].nickName;
        user.userBg = res.result[0].userBg;
        user.userImg = res.result[0].userImg;
        user.vip = res.result[0].vip;
      }
	  showLoading.value = false
    } catch (error) {
      console.error('获取用户信息失败:', error)
    }
  }
}




// onLoad(() => {
//   if (uni.getStorageSync('coffee_token')) {
//     fetchUserInfo()
//   }

// });


// // 页面显示时检查登录状态
// onShow(() => {
//   if (uni.getStorageSync('coffee_token')) {
//     fetchUserInfo()
//   }
// })

// 监听登录成功事件
onMounted(async() => {
if(uni.getStorageSync('coffee_token')) await fetchUserInfo()
})

// 移除事件监听
// onUnmounted(() => {
//   uni.$off('loginSuccess')
// })

const menuItems = [
  { title: '个人资料', path: '/pages/profile/profile' },
  { title: '我的订单', path: '/pages/orders/orders' },
  { title: '我的收藏', path: '/pages/collection/collection' },
  { title: '地址管理', path: '/pages/address/address' },
  { title: '安全中心', path: '/pages/secure/secure' }
];

const navigateTo = (path) => {
  uni.navigateTo({ url: path });
};

const handleLogin = () => {
  uni.navigateTo({ url: '/pages/protal/protal' });
};

const goBack = ()=>{
	const pages = getCurrentPages();
	if (pages.length > 1) uni.navigateBack()
	else  uni.switchTab({ url: '/pages/index/index' });
}

</script>

<style scoped>
.container {
  position: relative;
  padding-bottom: 100rpx;
  height: 100vh;
}

.header {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100rpx;
  border-bottom: 1rpx solid #eee;
}

.back-icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  font-size: 28rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
}

.back-text {
  margin-left: 10rpx;
  color: #232773;
}

.bg-image {
  width: 100%;
  height: 250rpx;
  /* 调整为更合适的值 */
  /* border-radius: 20rpx; */
}

.user-section {
  position: relative;
  /* 改为相对定位 */
  margin-top: 20rpx;
  /* 与 bg-image 的间距 */
  padding: 40rpx;
  background: white;
  border-radius: 20rpx;
  z-index: 1;
  /* 确保 user-section 在上方 */
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  float: left;
  margin-right: 20rpx;
}

.username {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.signature {
  color: #666;
  line-height: 1.6;
}

.menu-list {
  margin-top: 20rpx;
  /* 与 user-section 的间距 */
  background: white;
  border-radius: 20rpx;
  padding: 20rpx;
  z-index: 0;
  /* 确保 menu-list 在下方 */
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80rpx;
  border-bottom: 1rpx solid #eee;
  padding: 10rpx;
}

.menu-item:last-child {
  border-bottom: none;
}

.center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 160px;
  height: 160px;

}


.login-btn {
  display: block;
  text-align: center;
  background-color: #232773;
  border: 1rpx solid #232773;
  color: white;
  border-radius: 40rpx;
  padding: 20rpx 0;
  font-size: 32rpx;
  margin-top: 40rpx;
  width: 200rpx;
}
</style>